﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>组件目录 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
  <div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
    <ul class="nav bd-sidenav">
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/breadcrumb.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
    </ul>
  </div>
  <div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
    <ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/hover" class="nav-link"> Hover <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover" class="nav-link"> Popover </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy" class="nav-link"> Scrollspy </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip" class="nav-link"> Tooltip </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible" class="nav-link"> Visible <small class="badge text-uppercase badge-success">New</small> </a></li>
    </ul>
  </div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"> <a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<!--
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">示例</a>
<ul>
<li class="toc-entry toc-h3"><a href="#link-color">链接颜色</a></li>
<li class="toc-entry toc-h3"><a href="#additional-content">额外附加内容</a></li>
<li class="toc-entry toc-h3"><a href="#dismissing">关闭警告（小贴士效果）</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript行为r</a>
<ul>
<li class="toc-entry toc-h3"><a href="#triggers">触发</a></li>
<li class="toc-entry toc-h3"><a href="#methods">方法</a></li>
<li class="toc-entry toc-h3"><a href="#events">事件</a></li>
</ul>
</li>
</ul>
-->
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">组件</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">组件目录</h1>
  <p class="bd-lead">BootstrapVue组件和插件。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>


<nav data-v-811345e6="" class="bd-quick-links mb-3 d-none d-xl-none" aria-hidden="true"> </nav>
<nav class="bd-quick-links mb-3 d-none d-xl-none" data-v-811345e6="" aria-hidden="true"> </nav>
<nav data-v-cf866a74="" aria-label="Component groups section navigation" class="list-group mb-5">
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/alert.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">警告提示框(Alert)</strong> — <span data-v-cf866a74="" class="text-muted">通过少量可用和灵活的警告消息，为用户输出上下文反馈提示。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/badge.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">徽章(Badge)</strong> — <span data-v-cf866a74="" class="text-muted">在空间的内部提示控件，自适应贴齐内容。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/breadcrumb.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">面包屑导航(Breadcrumb)</strong> — <span data-v-cf866a74="" class="text-muted">提示当前页面的浏览位置，通过CSS 的 ::before 伪类和	</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/button.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">按钮(Button)</strong> — <span data-v-cf866a74="" class="text-muted">自定义按钮样式，广泛用于表单、对话框等场景中的操作，支持多种大小、状态等变量胡定义。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/button-group.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">按钮组(Button Group)</strong> — <span data-v-cf866a74="" class="text-muted">把一系列按钮编组在一行里，通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">按钮Toolbar(Button Toolbar)</strong> — <span data-v-cf866a74="" class="text-muted">通过可选的键盘导航，在一行上将一系列按钮组或输入组组合在一起。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/calendar.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">日历组件(Calendar)</strong> — <span data-v-cf866a74="" class="badge badge-success">NEW</span> <span data-v-cf866a74="" class="text-muted">b-calendar组件生成符合WAI-ARIA的日历样式日期选择小部件，可用于控制其他组件，或用于创建自定义的日期输入选择器。</span> <span data-v-cf866a74="" class="badge badge-secondary">v2.5.0</span></a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/card.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">卡片(Card)</strong> — <span data-v-cf866a74="" class="text-muted">一种灵活且可扩展的内容容器，它包括页眉和页脚选项，各种内容，上下文背景颜色以及强大的显示选项。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/carousel.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">轮播效果(Carousel)</strong> — <span data-v-cf866a74="" class="text-muted">幻灯片演示效果，用于循环显示使用CSS 3D特效，适用于一系列图像/文本/自定义标记，还包括对上一个或下一个控件和指示器的支持。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/collapse.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">折叠面板(Collapse)</strong> — <span data-v-cf866a74="" class="text-muted">允许在网页中用少量JavaScript以及CSS类切换内容，控制内容的可见性。使用少量的类（来自必需的过渡插件），以方便切换行为。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/dropdown.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">下拉菜单(Dropdown)</strong> — <span data-v-cf866a74="" class="text-muted">用于显示切换要展示的链接列表和更多的内容。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/embed.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">响应式嵌入(Embed)</strong> — <span data-v-cf866a74="" class="text-muted">通过创建可在任何设备上缩放的内在比率，根据父对象的宽度创建自适应视频或幻灯片嵌入。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表单(Form)</strong> — <span data-v-cf866a74="" class="text-muted">BootstrapVue表单组件和辅助组件，可选支持内联表单样式和验证状态。将它们与其他BootstrapVue组件配对，实现支持响应式的统一UI外面。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表单复选框(Form Checkbox)</strong> — <span data-v-cf866a74="" class="text-muted">实现跨浏览器一致性，b-form-checkbox-group和b-form-checkbox使用Bootstrap自定义复选框输入来替换浏览器默认复选框输入。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表格日期选择器(Form Datepicker)</strong> — <span data-v-cf866a74="" class="badge badge-success">NEW</span> <span data-v-cf866a74="" class="text-muted">b-form-datepicker是BootstrapVue自定义日期选择器输入表单控件。</span> <span data-v-cf866a74="" class="badge badge-secondary">v2.5.0</span></a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-file.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表格文件(Form File)</strong> — <span data-v-cf866a74="" class="text-muted">一种定制的，跨浏览器一致的文件输入控件，支持单个文件，多个文件和目录上载（对于支持目录模式的浏览器）。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-group.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表单组合(Form Group)</strong> — <span data-v-cf866a74="" class="text-muted">该b-form-group组件是一些结构添加到形式最简单的方法。目的是将表单控件与图例或标签配对，提供帮助文本和无效/有效的反馈文本，以及可视（彩色）上下文状态反馈。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-input.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表单输入框(Form Input)</strong> — <span data-v-cf866a74="" class="text-muted">创建各种类型的输入，例如：text，password，number，url，email，search，range，date等等。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-radio.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表单无线电输入(Form Radio)</strong> — <span data-v-cf866a74="" class="text-muted">实现跨浏览器的一致性，b-form-radio-group和b-form-radio使用Bootstrap的自定义无线电输入来替换浏览器的默认无线电输入。 它建立在语义和可访问标记之上。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-select.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">下拉式表单(Form Select)</strong> — <span data-v-cf866a74="" class="text-muted">select使用自定义样式自定义引导。根据数组，对象数组或对象指定选项。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">按钮式表单(Form Spinbutton)</strong> — <span data-v-cf866a74="" class="badge badge-success">NEW</span> <span data-v-cf866a74="" class="text-muted">旋转按钮允许在最小和最大数值范围内递增或递减数值，并带有可选的步进值。</span> <span data-v-cf866a74="" class="badge badge-secondary">v2.5.0</span></a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-tags.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">Tags表单选择器(Form Tags)</strong> — <span data-v-cf866a74="" class="text-muted">轻量级的定制标记输入表单控件，具有用于定制界面渲染，重复标记检测和可选标记验证的选项。</span> <span data-v-cf866a74="" class="badge badge-secondary">v2.2.0</span></a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/form-textarea.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表单文本区域(Form Textarea)</strong> — <span data-v-cf866a74="" class="text-muted">创建多行文本输入，支持自动调整高度，最小和最大行数以及上下文状态。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/image.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">图片(Image)</strong> — <span data-v-cf866a74="" class="text-muted">使图像通过b-img组件进入响应行为的文档和示例（不会变得比其父元素大），可选择为它们添加轻量级样式（全部通过props）。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/input-group.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">输入组(Input Group)</strong> — <span data-v-cf866a74="" class="text-muted">通过在文本输入的两侧添加文本，按钮或按钮组，扩展表单控件。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/jumbotron.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">Hero广告大块屏幕(Jumbotron)</strong> — <span data-v-cf866a74="" class="text-muted">通过引用.jumbotron方法，实现构建超大的Hreo界面，在网站上展示关键的营销信息。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/layout.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">布局和网格系统(Layout and Grid System)</strong> — <span data-v-cf866a74="" class="text-muted">使用强大的以移动为中心的flexbox网格(通过b-container、b-row、b-form-row和b-col组件)构建各种形状和大小的布局。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/link.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">链接(Link)</strong> — <span data-v-cf866a74="" class="text-muted">自定义b-link组件生成标准a链接或router-link。b-link支持disabled状态和click事件传播。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/list-group.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">清单群组(List group)</strong> — <span data-v-cf866a74="" class="text-muted">列表组是用于显示一系列内容的组件。可以修改列表组项以支持其中的几乎所有内容，也可以通过各种道具用作导航。</span></a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/media.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">媒体(Media)</strong> — <span data-v-cf866a74="" class="text-muted">媒体对象有助于构建复杂且重复的组件，便于复杂的内容组合。基于flexbox，仅用两个必需的类就可以做到这一点。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/modal.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">模态(Modal)</strong> — <span data-v-cf866a74="" class="text-muted">支持从用户通知到完全自定义内容的许多用例，并具有少量有用的子组件，大小，变体，可访问性等。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/nav.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">导航(Nav)</strong> — <span data-v-cf866a74="" class="text-muted">引导程序中的导航共享一般的标记和样式，从基本的b-nav类到activeand disabled状态的常规标记和样式。交换修改道具，在每个风格之间切换。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/navbar.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">导航栏(Navbar)</strong> — <span data-v-cf866a74="" class="text-muted">该组件b-navbar是一个包装器，用于将品牌，导航和其他元素放置在简洁的标题中。它易于扩展，而且由于有了该b-collapse组件，它可以轻松集成响应行为。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/pagination.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">分页(Pagination)</strong> — <span data-v-cf866a74="" class="text-muted">快速的第一，上一个，下一个，最后一个和页面按钮，用于分页控制另一个组件（例如b-table或列表）。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">分页导航(Pagination Nav)</strong> — <span data-v-cf866a74="" class="text-muted">快速的第一，上一个，下一个，最后一个和页面按钮，用于基于导航的分页，支持常规链接或路由器链接。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/popover.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">弹窗(Popover)</strong> — <span data-v-cf866a74="" class="text-muted">Popover功能提供类似工具提示的行为，可以通过b-popover组件或v-b-popover指令轻松地应用于任何交互式元素。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/progress.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">进展(Progress)</strong> — <span data-v-cf866a74="" class="text-muted">使用我们的自定义进度组件来显示简单或复杂的进度条，并支持水平堆叠的条，动画背景和文本标签。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/spinner.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">微调器(Spinner)</strong> — <span data-v-cf866a74="" class="text-muted">b-spinner组件可用于显示项目中的加载状态。仅使用基本的HTML和CSS作为轻量级的Vue功能组件来呈现它们。可以使用一些内置的props和/或Bootstrap v4实用程序类轻松地自定义它们的外观，对齐方式和大小。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/table.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表(Table)</strong> — <span data-v-cf866a74="" class="text-muted">为了显示表格数据，b-table支持分页，过滤，排序，自定义呈现，各种样式选项，事件和异步数据。为了简单地显示表格数据而没有所有功能，BootstrapVue提供了两个轻巧的替代组件b-table-lite和b-table-simple。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/tabs.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">表(Tabs)</strong> — <span data-v-cf866a74="" class="text-muted">创建本地内容的可选项窗格的小部件。选项卡组件内部建立在导航和卡片上，并提供选项卡的完整键盘导航控制。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/toast.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">弹出提示框(Toasts)</strong> — <span data-v-cf866a74="" class="text-muted">使用b-toast和b-toaster轻量级组件向您的访客推送通知，这些组件易于自定义以生成警告消息。</span> </a>
<a data-v-cf866a74="" href="../../../bootstrap-vue/docs/components/tooltip.html" class="list-group-item list-group-item-action" target="_self"><strong data-v-cf866a74="" class="text-primary">提示冒泡(Tooltip)</strong> — <span data-v-cf866a74="" class="text-muted">通过b-tooltip组件或v-b-tooltip指令（首选方法）轻松将工具提示添加到元素或组件。</span> </a></nav>

</main>



</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
